import React, { useMemo, useState } from 'react'
import { NavBar, Button, Card, List, Checkbox, Tag } from 'antd-mobile'
import { useNavigate, useLocation } from 'react-router-dom'
import styles from './order.module.css'
import { useSelector, useDispatch } from 'react-redux'
import { SwitchPer } from '../../store/PersonSlice'

function Index() {
  const navigate = useNavigate()
  const { state } = useLocation()
  console.log(state)
  const { PersonList } = useSelector(state => state.PersonSlice)
  const dispatch = useDispatch()

  // 座位
  const SelPersonList = useMemo(() => {
    return PersonList.filter(item => {
      return item.state;
    })
  }, [PersonList])
  // 选座
  const sitList = useMemo(() => {
    if (SelPersonList.length === 0) return [];
    if (SelPersonList.length === 1) {
      return [
        ['A', 'B', 'C', 'D', 'E'],
      ]
    }
    if (SelPersonList.length === 2) {
      return [
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
      ]
    }
    if (SelPersonList.length === 3) {
      return [
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
      ]
    }
    if (SelPersonList.length === 4) {
      return [
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
        ['A', 'B', 'C', 'D', 'E'],
      ]
    }
  }, [SelPersonList])


  const [sit, setSit] = useState({})
  // row-pos
  const sitPos = (row, pos) => {
    setSit(...sit, { row, pos })
  }

  // 最后人和座位
  const lastSit = useMemo(() => {
    return PersonList.slice(-SelPersonList.length)
  }, [sit, SelPersonList])

  return (
    <div>
      <NavBar onBack={() => { navigate(-1) }}>填写订单</NavBar>
      {/* 列表大盒子 */}
      <div>
        <div className={styles.box}>
          {/* 上 */}
          <div className={styles.top}>
            {/* 左边 */}
            <div className={styles.left}>
              {/* 1 */}
              <div>
                <p>{state.dst}</p>
                <p>{state.dasn} {state.dat}</p>
              </div>
              {/* ---- */}
              <div>-----→</div>
              {/* 2 */}
              <div>
                <p>{state.ast}</p>
                <p>{state.aasn} {state.aat}</p>

              </div>
            </div>
            {/* 右边 */}
            <div className={styles.right}>￥{state.lps[0].atp}</div>
          </div>
          {/* 下 */}
          <div className={styles.foot}>
            <span>{state.ss[0].asn}</span> || {''}
            <span>{state.ss[0].amn}</span>
          </div>

          <p style={{ display: 'flex', justifyContent: 'space-around' }}>
            <span>二等座 有票</span>
            <span>一等座 有票</span>
            <span>特等座 18票</span>
          </p>
        </div>
      </div>

      <div>
        <Card>
          {/* 乘车人 */}
          <Button size='small' color='primary' onClick={() => navigate('/addPerson')}>
            选择乘车人
          </Button>
          {/* 乘车人 */}
          <List>
            {
              PersonList.map((item, index) => (
                <List.Item key={index}
                  extra={<div>
                    <Checkbox checked={item.state} onClick={() => dispatch(SwitchPer(item))}></Checkbox>
                  </div>}
                  description={<div>{item.code}</div>}
                >{item.name}</List.Item>
              ))
            }
          </List>
        </Card>
        {/* 座位 */}
        <Card title='选择座位'>
          <List>
            <div>
              {
                sitList.map((item, row) => (
                  <div key={row}>
                    {
                      item.map((it, pos) => {
                        return <Tag key={pos}
                          color={lastSit.some(item => item.row === row && item.pos === pos) ? '#2db7f5' : "default"}
                          onClick={() => sitPos(row, pos)}
                        >
                          {it}
                        </Tag>
                      })
                    }
                  </div>
                ))
              }
            </div>
          </List>
        </Card>
      </div>
      <Button block color='primary' size='large' onClick={() => navigate('/orderDetail', { state: state })}>
        订单详情
      </Button>
    </div>
  )
}

export default Index
